<template>
	<div class="operation-container">
		<el-button type="primary" @click.stop="$emit('search')"> 查询 </el-button>
		<el-button @click.stop="$emit('reset')"> 重置 </el-button>
		<el-button type="primary" link class="search-isOpen" v-if="showCollapse" @click="collapse_ = !collapse_">
			{{ stateText }}
			<el-icon class="el-icon--right">
				<span :style="'margin-left: 0.1em; transition: all 0.3s ease 0s; transform: rotate(' + (collapse_ ? 0 : 0.5) + 'turn);'">
					<svg
						viewBox="64 64 896 896"
						focusable="false"
						data-icon="down"
						width="1em"
						height="1em"
						fill="currentColor"
						aria-hidden="true"
					>
						<path
							d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
						/>
					</svg>
				</span>
			</el-icon>
		</el-button>
	</div>
</template>

<script setup lang="ts" name="ProSearchOperation">
import { computed } from 'vue'

// 默认值
const props = withDefaults(
	defineProps<{
		collapse?: boolean // 是否展开
		showCollapse?: boolean // 是否显示展开
	}>(),
	{
		collapse: true,
		showCollapse: false
	}
)
const emits = defineEmits(['update:collapse', 'reset', 'search'])
const collapse_ = computed({
	get() {
		return props.collapse
	},
	set(val) {
		emits('update:collapse', val)
	}
})

let stateText = computed(() => {
	return props.collapse ? '展开' : '收起'
})
</script>
<style scoped lang="scss">
.operation-container {
	width: 100%;
	text-align: right;
	white-space: nowrap;
}
</style>
